
<template>
	<!-- 组件-教学计划表格 -->
	<div style="width:100%;">
		<table class="table" cellspacing="0" style="width: 100%;">
			<thead class="thead">
				<tr>
					<td style="width: 16%;">时间</td>
					<td style="width: 16%;">周一</td>
					<td style="width: 16%;">周二</td>
					<td style="width: 16%;">周三</td>
					<td style="width: 16%;">周四</td>
					<td style="width: 16%;">周五</td>
					<td style="width: 4%;" v-if="isEdite==1"></td>
				</tr>
			</thead>
			<tbody v-if="isEdite==1" class="tbody">
				<tr v-for="(item,index) in planList" :key="index">
					<td v-if="!item.inittime">
						<el-time-picker
							is-range
							v-model="item.time"
							range-separator="-"
							value-format="yyyy-MM-dd HH:mm:ss"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							placeholder="选择时间范围">
						</el-time-picker>
					</td>
					<td v-else>{{item.time}}</td>
					<td v-if="!item.initMonday">
						<!-- <courseMealPopover></courseMealPopover> -->
						<div v-if="item.Monday">
							<el-button type="text" @click="selectCourseMeal(index,'Monday')">{{item.Monday.planItemContent}}</el-button>
							<el-button type="text" icon="el-icon-close"
						 	@click="deleteCourseMeal(index,'Monday')"></el-button>
						</div>
						<el-button v-else type="text" icon="el-icon-circle-plus"
						 @click="selectCourseMeal(index,'Monday')"></el-button>
					</td>
					<td v-else>{{item.Monday.planItemContent}}</td>
					<td v-if="!item.initTuesday">
						<div v-if="item.Tuesday">
							<el-button type="text" @click="selectCourseMeal(index,'Tuesday')">{{item.Tuesday.planItemContent}}</el-button>
							<el-button type="text" icon="el-icon-close"
						 	@click="deleteCourseMeal(index,'Tuesday')"></el-button>
						</div>
						<el-button v-else type="text" icon="el-icon-circle-plus"
						 @click="selectCourseMeal(index,'Tuesday')"></el-button>
					</td>
					<td v-else>{{item.Tuesday.planItemContent}}</td>
					<td v-if="!item.initWednesday">
						<div v-if="item.Wednesday">
							<el-button type="text" @click="selectCourseMeal(index,'Wednesday')">{{item.Wednesday.planItemContent}}</el-button>
							<el-button type="text" icon="el-icon-close"
						 	@click="deleteCourseMeal(index,'Wednesday')"></el-button>
						</div>
						<el-button v-else type="text" icon="el-icon-circle-plus"
						 @click="selectCourseMeal(index,'Wednesday')"></el-button>
					</td>
					<td v-else>{{item.Wednesday.planItemContent}}</td>
					<td v-if="!item.initThursday">
						<div v-if="item.Thursday">
							<el-button type="text" @click="selectCourseMeal(index,'Thursday')">{{item.Thursday.planItemContent}}</el-button>
							<el-button type="text" icon="el-icon-close"
						 	@click="deleteCourseMeal(index,'Thursday')"></el-button>
						</div>
						<el-button v-else type="text" icon="el-icon-circle-plus"
						 @click="selectCourseMeal(index,'Thursday')"></el-button>
					</td>
					<td v-else>{{item.Thursday.planItemContent}}</td>
					<td v-if="!item.initFriday">
						<div v-if="item.Friday">
							<el-button type="text" @click="selectCourseMeal(index,'Friday')">{{item.Friday.planItemContent}}</el-button>
							<el-button type="text" icon="el-icon-close"
						 	@click="deleteCourseMeal(index,'Friday')"></el-button>
						</div>
						<el-button v-else type="text" icon="el-icon-circle-plus"
						 @click="selectCourseMeal(index,'Friday')"></el-button>
					</td>
					<td v-else>{{item.Friday.planItemContent}}</td>
					<td v-if="item.delete">
						<el-button size="mini" type="danger" @click="deleteRow(index)">删 除</el-button>
					</td>
					<td v-else></td>
				</tr>
				<tr>
					<td colspan="7" align="center">
						<el-button type="text" icon="el-icon-circle-plus" @click="addrow">添加</el-button>
					</td>
				</tr>
			</tbody>
			<tbody v-else class="tbody">
				<tr v-for="(item,index) in planList" :key="index">
					<td>
						{{item.time}}
					</td>
					<td>
						{{item.Monday.planItemContent}}
					</td>
					<td>
						{{item.Tuesday.planItemContent}}
					</td>
					<td>
						{{item.Wednesday.planItemContent}}
					</td>
					<td>
						{{item.Thursday.planItemContent}}
					</td>
					<td>
						{{item.Friday.planItemContent}}
					</td>
				</tr>
			</tbody>
		</table>
		<courseMealDialog :visible="courseMealDialogObj.visible"
		 @hidden="courseMealDialogObj.visible=false"
		 @save="selectCallBack"></courseMealDialog>
	</div>
</template>

<script>
	// import courseMealPopover from './course_meal_popover'
	import courseMealDialog from './course_meal_dialog'
	let vm;
	export default{
		components:{courseMealDialog},
		data(){
			return {
				/**是否启用编辑 */
				isEdite:1,
				planList:[],
				courseMealDialogObj:{
					visible:false,
					index:0,
					key:''
				},
				weekModeMatch:{
					Monday:1,
					Tuesday:2,
					Wednesday:3,
					Thursday:4,
					Friday:5,
				},
				weekModeMatch2:{
					1:'Monday',
					2:'Tuesday',
					3:'Wednesday',
					4:'Thursday',
					5:'Friday',
				},
				preField:'init'
			}
		},
		methods:{
			init(data){
				this.isEdite=data.isEdite;
				this.planList=[];
				if(data.data){
					this.queryInit(data.data)
				}
				this.courseMealDialogObj.visible=false;
			},
			queryInit(data){
				if(data.planItemList&&data.planItemList.length>0){
					let temp={};
					data.planItemList.forEach(ele=>{
						let time=ele.startTime+'-' + ele.endTime;
						if(!temp[time]){
							temp[time]={
								time:time,
								inittime:time,
								Monday:'',
								Tuesday:'',
								Wednesday:'',
								Thursday:'',
								Friday:'',
							}
						}
						
						let w=vm.weekModeMatch2[ele.weekMode];
						temp[time][w]=ele;
						temp[time][vm.preField+w]=ele.planItemContent;
					});
					
					for(let k in temp){
						this.planList.push(temp[k]);
					}
				}
			},
			addrow(){
				let start=new Date(),end=new Date();
				start.setHours(9,0,0,0);
				end.setHours(10,0,0,0);
				this.planList.push({
					time:[start,end],
					Monday:'',
					Tuesday:'',
					Wednesday:'',
					Thursday:'',
					Friday:'',
					delete:true,
				});
			},
			deleteRow(index){
				this.$confirm("是否删除该计划行?", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
					center: true
				})
				.then(() => {
					vm.planList.splice(index, 1);
				})
				.catch(() => {});
			},
			getPlanData(){
				let result=[];
				let weeklist=['Monday','Tuesday','Wednesday','Thursday','Friday'];
				for(let i=0,length=this.planList.length;i<length;i++){
					let row=this.planList[i];
					if(!row.time||row.time.length<2){
						this.$message({
							type:'warning',
							message:'模板时间不可为空！'
						});
						return false;
					}
					
					let start,end;
					if(typeof row.time == 'string'){
						let tt=row.time.split('-');
						start=tt[0];
						end=tt[1];
					}
					else{
						start=row.time[0];
						end=row.time[1];
					}
					weeklist.forEach(k=>{
						if(row[k].planItemContent){
							let res={
								planItemContent:row[k].planItemContent,
								weekMode:vm.weekModeMatch[k],
								planItemContentList:[{
									planObjectType:row[k].planObjectType,
									planObjectId:'1'
								}]
							};
							res.startTime=start;
							res.endTime=end;
							result.push(res);
						}
					});

				}
				
				return result;
				// function getWeekdata(data,key){
				// 	return {
				// 		planItemContent:data[key].planItemContent,
				// 		weekMode:vm.weekModeMatch[key],
				// 		planItemContentList:[{
				// 			planObjectType:data[key].planObjectType,
				// 			planObjectId:'1'
				// 		}]
				// 	}
				// }
				
			},
			selectCourseMeal(index,key){
				if(index>=this.planList.length)return;
				this.courseMealDialogObj.index=index;
				this.courseMealDialogObj.key=key;
				this.courseMealDialogObj.visible=true;
			},
			selectCallBack(data){
				this.planList[this.courseMealDialogObj.index][this.courseMealDialogObj.key]=data;
				this.courseMealDialogObj.visible=false;
			},
			deleteCourseMeal(index,key){
				// debugger
				if(index>=this.planList.length)return;
				this.planList[index][key]=undefined;
			},

		},
		mounted(){
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	
	.timeSelect{
		width: 1.1rem;
	}
	
</style>
<style scoped src="@/style/module/table.css"></style>